<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: device-css"/>
</head>
<body>
<div class="wrapper">
    <div class="row">
        <div class="col-sm-4" id="maxHeightCard"></div>
        <div class="col-sm-4" id="oneTenthHeightCard"></div>
        <div class="col-sm-4" id="significantHeightCard"></div>
    </div>
    <div class="chart-view">
        <div class="row search-row" style="">
            <div class="col-sm-12">
                <form id="formId">
                    <button type="button" class="btn btn-primary btn-rounded btn-sm" id="view-btn"
                            onclick="changeView()">
                        <i class="fa fa-list"></i>
                    </button>
                    <input type="text" class="date-input" placeholder="日期" id="date"
                           style="width: 180px; text-align: center; padding-left: 0"
                           name="date" autocomplete="off">
                    <input type="hidden" id="beginTime" name="params[beginTime]">
                    <input type="hidden" id="endTime" name="params[endTime]">
                    <input type="hidden" th:value="${boat.code}" name="boatCode">
                    <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="search()">
                        <i class="fa fa-search"></i>
                    </button>
                    <button type="button" class="btn btn-warning btn-rounded btn-sm" onclick="resetInput()">
                        <i class="fa fa-refresh"></i>
                    </button>
                    <button type="button" class="btn btn-success btn-rounded btn-sm" id="download-btn"
                            onclick="openDownloadDialog()" style="display: none">
                        <i class="fa fa-cloud-download"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" id="chart-row">
                <canvas id="chart"></canvas>
            </div>
            <div class="col-sm-12" id="table-row" style="display: none">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: device-js"/>
<script th:inline="javascript">
    var msgType = 'waveData';
    var boatCode = [[${boat.code}]];
    let downloadUrl = '/boat/waveData/export';

    function msgGot(object) {
        if (object.type !== msgType || object.data.boatCode !== boatCode) return;
        let data = object.data;
        let label = data.time;
        maxHeightCard.update(data.maxHeight, label)
        oneTenthHeightCard.update(data.oneTenthHeight, label)
        significantHeightCard.update(data.significantHeight, label)
    }

    let chartData = {
        labels: [],
        datasets: [{
            label: '平均波高',
            data: [],
            tension: 0.2,
        }, {
            label: '最大波高',
            data: [],
            tension: 0.2,
        }, {
            label: '1/10波高',
            data: [],
            tension: 0.2,
        }, {
            label: '有效波高',
            data: [],
            tension: 0.2,
        }]
    };
    const config = {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            scales: {
                x: {
                    grid: {
                        display: false,
                    }
                },
                y: {
                    grid: {
                        color: 'rgba(255,255,255,.15)',
                        display: true,
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                },
            }
        },
    };

    function initChart() {
        if (chart) {
            chart.update();
        } else {
            chart = new Chart(document.getElementById('chart'), config);
        }
    }

    var prefix = "/boat/waveData";
    var options = {
        url: prefix + "/list",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        modalName: "波浪仪",
        showSearch: false,
        showRefresh: false,
        showColumns: false,
        showToggle: false,
        sortName: 'id',
        sortOrder: 'desc',
        sidePagination: 'client',
        onLoadSuccess: function (data) {
            dataList = data //.rows;
            if ($.common.isEmpty(dataList)) dataList = [];
            if (dataList.length === 0) {
                $.modal.msg(currentDate + ' 无数据')
            }
            clearData();
            prepareData();
            initCards();
            initChart();
        },
        columns: [
            {
                field: 'time',
                title: '数据时间'
            },
            {
                field: 'averageHeight',
                title: '平均波高'
            },
            {
                field: 'averagePeriod',
                title: '平均周期'
            },
            {
                field: 'maxHeight',
                title: '最大波高'
            },
            {
                field: 'maxPeriod',
                title: '最大周期'
            },
            {
                field: 'oneTenthHeight',
                title: '1/10 波高'
            },
            {
                field: 'oneTenthPeriod',
                title: '1/10 周期'
            },
            {
                field: 'significantHeight',
                title: '有效波高'
            },
            {
                field: 'significantPeriod',
                title: '有效周期'
            },
            {
                field: 'number',
                title: '波数'
            },
            {
                field: 'direction',
                title: '波向'
            },
        ]
    };
    $.table.init(options);

    function prepareData() {
        if (dataList.length === 0) return;
        let from = dataList.length - 11;
        if (from < 0) from = 0;
        for (let i = 0; i < dataList.length; i++) {
            let data = dataList[i]
            if (i >= from && !cardRendered) {
                xLabels.push(data.time)
                cardValues[0].push(data.maxHeight)
                cardValues[1].push(data.oneTenthHeight)
                cardValues[2].push(data.significantHeight)
            }
            chartData.labels.push(data.time.split(' ')[1])
            let keys = ['averageHeight', 'maxHeight', 'oneTenthHeight', 'significantHeight']
            for (let i = 0; i < chartData.datasets.length; i++) {
                chartData.datasets[i].data.push(data[keys[i]]);
            }
        }
    }

    let xLabels = [];
    let cardValues = [];
    cardValues.push([])
    cardValues.push([])
    cardValues.push([])
    let maxHeightCard, oneTenthHeightCard, significantHeightCard;

    function initCards() {
        if (cardRendered) return
        maxHeightCard = new InfoCard(cardValues[0], xLabels, {
            parentId: 'maxHeightCard',
            name: '最大波高',
            unit: 'm',
            min: 0,
            max: 40,
            type: 'line',
            icon: '/img/icon/wave.webp',
        }).init();
        oneTenthHeightCard = new InfoCard(cardValues[1], xLabels, {
            parentId: 'oneTenthHeightCard',
            name: '1/10波高',
            unit: 'm',
            min: 0,
            max: 40,
            type: 'line',
            icon: '/img/icon/wave.webp',
        }).init();
        significantHeightCard = new InfoCard(cardValues[2], xLabels, {
            parentId: 'significantHeightCard',
            name: '有效波高',
            unit: 'm',
            min: 0,
            max: 40,
            type: 'line',
            icon: '/img/icon/wave.webp',
        }).init();
        cardRendered = true;
    }

    function windowResizeCallback() {
        maxHeightCard.render();
        oneTenthHeightCard.render();
        significantHeightCard.render();
    }
</script>

</body>
</html>